<template>
  <div class="index" :style="`width: ${width}px;height: ${height}px`">

    <div class="menu">

      <div class="me">
        <!-- <img class="avatar" src="../assets/avatar.png">-->
        <div style="height: 150px"></div>
        <ul>
          <li><img src="../assets/本人.png"/>白雨浓</li>
          <li><img src="../assets/学校.png"/>河北工程大学 本科</li>
          <li><img src="../assets/专业.png"/>计算机科学与技术</li>
          <li><img src="../assets/出生日期.png"/>1995年4月6日</li>
          <li><img src="../assets/地址.png"/>辽宁省葫芦岛市 汉族</li>
          <li><img src="../assets/邮箱.png"/>evilbai@foxmail.com</li>
          <li><img src="../assets/手机.png"/>18832030507</li>
        </ul>
      </div>

      <div class="git">
        <p>本简历由Vue.js制作，gitee地址：
          <a href="https://gitee.com/findviewbydream/resume">https://gitee.com/findviewbydream/resume</a></p>
      </div>

    </div>

    <div class="main">

      <div class="top-img">
        <img src="../assets/top.jpg"/>
      </div>

      <div class="list">
        <el-card class="card" v-for="card in list">
          <div slot="header">
            <span class="title">{{ card.title }}</span>
          </div>
          <div class="content">
            <p v-if="card.content" class="item-content">{{ card.content }}</p>
            <ul v-else-if="card.items">
              <li v-for="item in card.items">
                <p>{{ item.title }}</p>
                <ul>
                  <li v-for="(it,index) in item.items" v-html="`${index+1} . ${it} <div class='hr'></div>`"></li>
                </ul>
              </li>
            </ul>
            <ul v-else-if="card.list">
              <li v-for="(item,index) in card.list" v-html="`${index+1} . ${item} <div class='hr'></div>`"></li>
            </ul>
          </div>
        </el-card>
      </div>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2017/10/31 21:25
   *
   *
   **/
  export default{
    name: 'RIndex',
    data(){
      return {
        width: 1300,
        height: 0,
        list: [
          {
            title: '求职意向', content: 'Java后端方向'
          }, {
            title: '专业技术', items: [{
              title: '', items: [
                '熟练掌握Java基本语法，熟练掌握Java8 lambda表达式，熟练使用SSM框架，SpringBoot框架，' +
                '擅长前后端分离式开发，Restful。简单阅读过JDK源码，目前正在学习SpringCloud，向分布式方向发展',
                '熟练掌握Vue.js框架，了解Vue的生命周期，MVVM原理',
                '熟练使用mysql，了解并能够简单使用Redis，对于NoSql，NewSql有一定了解',
                '熟练使用Nginx',
                '熟悉Kotlin语言，了解Go语言，目前正在自学',
                '熟悉Node.js，了解Electron跨平台开发，了解Koa框架，Koa2框架并且有一定的应用，学习过ThinkJS框架',
                '了解并且会简单使用Docker',
              ]
            }]
          }, {
            title: '项目经历', list: [
              '2017年3月~至今，自己在外承接项目，给邯郸一个高考志愿填报中心做门户网站《享学高考网》，网址：http://www.xiangxuegaokao.com。<br>' +
              '&nbsp;&nbsp;&nbsp;&nbsp;该项目使用SpringBoot+Vue作为主体架构，为了兼容IE部分页面使用JQuery。该项目后台使用caffeine作为单机缓存，' +
              '（测试使用过Redis和Docker，由于服务器性能原因没有使用），数据库使用Mysql，数据量近百万，连接池使用的是Druid。并且使用Groovy脚本语言进行动态公式解析，' +
              '该项目总体代码量超过8万行，超过95%由我一人完成，其余部分由其他同学完成。目前正在将此项目采用SpringCloud分布式化，作为我的毕业设计。',

              '2018年1月，在完成《享学高考网》期间，为了解决传统CRUD重复代码过多问题，本人使用Electron(Node)完成了一套跨平台的代码生成器，并已经开源，https://gitee.com/findviewbydream/auto-code',

              '2017年7月~10月中旬，在杭州盈盈理财公司架构组有过一段时间实习，期间完成了一套自动化测试平台，参与完成部分的分布式调度平台。<br>' +
              '&nbsp;&nbsp;&nbsp;&nbsp;自动化测试平台是为了解决当时测试组的测试用例无法保存，无法回滚测试。该项目使用SpringBoot+Vue，前端使用ElementUI，' +
              '后端主要使用HttpClient进行Http访问，Hessian进行RPC访问，使用Groovy进行断言。<br>' +
              '&nbsp;&nbsp;&nbsp;&nbsp;分布式调度平台是将Quartz分布式化，主要解决公司内定时脚本的执行，告警，失败重跑等。该项目为中心化思想，一主多从机制，' +
              '使用数据库进行一致化，每10s向中心调度平台发送心跳，判断子系统的存活性，并定时向子系统发送需要执行的任务。',

              '2017年1月~3月，为了解决饭店中点菜宝的成本过高问题，开发了基于Android端的《智能餐厅》项目（艾课杯一等奖），该项目主要使用WebSocket进行及时通讯等。',

              '2016年1月~2017年1月，给邯郸移动做过一个答题送流量的Android端APP 易答，并且用户量超过5000，后期由于移动内部调整，项目下线',

              '2016年6月，河北工程大学信电学院新生入学指南APP',

              '2015年11月，给邯郸市公安局做过一个小型的Android端APP(测试用)',
            ]
          }, {
            title: '获奖情况', list: [
              '2017年8月，艾课杯全国移动互联网创业大赛，凭借《基于Android端的低成本智能点餐管理系统》获得移动组全国一等奖',
              '2017年5月，蓝桥杯河北省一等奖，全国三等奖',
              '2016年7月，中国高校计算机大赛-团体程序设计天梯赛河北省一等奖',
            ]
          }, {
            title: '个人评价', content: '本人热爱编程，在大学期间编码量10几万行。了解基本的数据结构，' +
            '了解简单的JVM和GC，并且有很强的自学能力，曾在大一时自学' +
            'Android，大二时自学的SSM框架，大三时自学的SpringBoot和Vue等框架，' +
            '也正是这样，所以性格有些内向，不过适合程序员这个行业，也非常喜欢程序员这个职业，' +
            '希望贵公司能够给我一个机会，让我给贵公司增添一份力量'
          }
        ]
      }
    },
    beforeMount(){
      //this.width = document.documentElement.clientWidth;
      this.height = this.width * (297 / 210);
    },
    mounted(){
      this.$nextTick(() => {

      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .index {
    display flex
    margin auto
    justify-content space-around

    .menu {
      position relative
      width 30%
      height 100%
      background-color #254665
    }

    .me {
      width 100%
      margin-top 120px
      text-align center

      .avatar {
        width 50%
        border 2px solid white
        border-radius 50%
      }

      ul {
        width 70%
        margin 70px auto
        list-style none
      }

      li {
        display flex
        align-content center
        justify-content left
        color #eee
        line-height 20px
        margin-top 8px
        img {
          width 20px
          height 20px
          margin-right 10px
        }
      }
    }

    .git {
      position absolute
      bottom 50px
      left 80px
      text-align left
      font-size 13px
      color white
      a {
        display block
        width 90%
        color white
      }
    }

    .main {
      width 80%
    }

    .top-img {
      position relative
      width 100%
      height 180px
      overflow hidden
      background: -moz-linear-gradient(top, transparent, white);
      img {
        position absolute
        top 0
        left 0
        z-index -100
        width 100%
      }
    }

    .list {
      position relative
      z-index 100
      margin-top -80px

      .card {
        width 96%
        min-height 100px
        margin 30px auto
        box-shadow 2px 5px 5px #ccc
      }

      .title {
        display flex
        align-content center
        color #666
        &:before {
          content ''
          display inline-block
          width 15px
          height 15px
          border-radius 50%
          margin-right 10px
          background-color #3a8ee6
        }
      }

      .content {
        font-size 1em
        color #5a5e66
        line-height 23px

        ul {
          width 93%
          margin auto
          list-style none
        }

        .item-content {
          padding-left 28px
        }
      }
    }

    .hr {
      margin 5px auto
      border-bottom 1px solid #ddd
    }
  }
</style>
